<template>
    <view>
        <!-- navbar -->
        <u-navbar :shadow="true" :fixed="true" :placeholder="true"
            @leftClick="back"
            title="考勤区域"
            rightIcon="plus" rightIconSize="20" @rightClick="add">
        </u-navbar>

        <!-- content -->
        <view class="uni-area">
            <u-swipe-action>
                <u-swipe-action-item class="u-m-t-30 tem" v-for="(tem,ind) in page.list" :key="ind"
                    :options="options" :threshold="50" @click="click" :name="tem.id">
                    <uni-item-area :listItem="tem"></uni-item-area>
                </u-swipe-action-item>
            </u-swipe-action>

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" duration="3000" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>
<script>
export default {
    data(){
        return{
            userInfo: uni.getStorageSync("userInfo"),
            paging:{
                pageNum: 1,
                pageSize: this.$config.pageSize,
                gcbh: uni.getStorageSync("userInfo").ssgcbh,
            },
            page:{
                scrollTop: 0,
                status: 'nomore',
                total: 0,
                list: [], // 列表
            },
            options: [ // 修改删除查看按钮
                {
                    text: '修改',
                    style: {
                        backgroundColor: '#3c9cff',
                        fontSize: '26rpx'
                    }
                }, 
                {
                    text: '删除',
                    style: {
                        backgroundColor: '#f56c6c',
                        fontSize: '26rpx'
                    }
                }
            ],
        }
    },


    // 页面滚动
    onPageScroll(e){
        this.page.scrollTop = e.scrollTop
    },
    // 页面滚动到底部触发
    onReachBottom(){
        if( this.page.list.length < this.page.total ){
            this.paging.pageNum += 1
            this.getList()
        }else{
            this.page.status = 'nomore'
        }
    },


    onLoad(){
    },

    onShow(){
        this.paging.pageNum = 1
        this.page.list = []
        this.getList()
    },


    methods: {
        back(){ uni.navigateBack() },
        rightClick(){},
        add(){
            uni.navigateTo({
                url: '/pages/kaoqin-bag/set-area',
            })
        },


        // 列表
        getList(){
            this.page.status = 'loading'
            this.$request( this,this.$apis.clockinAreaList, this.paging ).then(res=>{
                const { rows } = res
                // console.log('考勤区域列表',rows)
                this.page.total = res.total
                if( rows && res.total != 0 ){
                    this.page.status = 'loadmore'
                    rows.map((v,i)=>{
                        this.page.list.push(v)
                    })
                }else{
                    this.page.status = 'nomore'
                    uni.$u.toast('暂无更多数据')
                }
            })
        },


        // 滑动单元格点击事件
        click(e){
            if( e.index == 0 ){ // 修改
                uni.navigateTo({
                    url: '/pages/kaoqin-bag/set-area?id='+e.name
                })
            }else{
                const api = JSON.parse(JSON.stringify(this.$apis.delClockinArea))
                api.url+=e.name
                uni.showLoading({ title:'删除中' })
                this.$request( this,api, {}).then(res=>{
                    // console.log('删除结果',res)
                    this.paging.pageNum = 1
                    this.page.list = []
                    this.getList()
                })
            }
        },


        // 回到顶部
        toTop(){
            uni.pageScrollTo({ scrollTop: 0, duration: 300 })
        }
    },
}
</script>
<style scoped lang="scss">
    .tem{
        box-shadow: 0px 4px 8px -8px rgba(0, 0, 0, 0.2);
    }
</style>